<template>
  <!-- 主体区域 -->
  <section id="app">
    <!-- 输入框 -->
    <TodoHeader @add="add"></TodoHeader>

    <!-- 列表区域 -->
     <TodoMain :todoList="todoList" @del="del"></TodoMain>
    
    <!-- 统计和清空 -->
    <TodoFooter :todoList="todoList" @clear="clear"></TodoFooter>
  </section>
</template>

<script>

export default {
  data () {
    return {
      todoList: JSON.parse(localStorage.getItem('todoList')) ||  [
        {id: 1, name: '吃饭'},
        {id: 2, name: '睡觉'},
        {id: 3, name: '打豆豆'},
      ]
    }
  },
  watch:{
    todoList:{
      handler(newValue){
        localStorage.setItem('todoList',JSON.stringify(newValue))
      },
      deep:true
    }
  },
  methods:{
    del(id){
      this.todoList = this.todoList.filter(item=>item.id !== id)
    },
    add(txt){
      this.todoList.push({
        id:+new Date,
        name:txt
      })
      alert('添加成功')
    },
    clear(){
      this.todoList =[]
    }
  }
}
</script>

<style>

</style>
